<template>
  <div class="go-shape-box">
    <slot></slot>
    <!-- 锚点 -->
    <template v-if="!hiddenPoint">
      <div
          :class="`shape-point ${point}`"
          v-for="(point, index) in select ? pointList : []"
          :key="index"
          :style="usePointStyle(point, index, item.attr, cursorResize)"
          @mousedown="handlerMouseDown($event, point)"
      ></div>
    </template>

    <!-- 选中 -->
    <div class="shape-modal" :style="useSizeStyle(item.attr)">
      <div class="shape-modal-select" :class="{ active: select }"></div>
      <div class="shape-modal-change" :class="{ selectActive: select, hoverActive: hover }"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useDragEdit } from '@/pinia/modules/dragStore'

import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
import {throttle} from "lodash";


const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  hiddenPoint: {
    type: Boolean,
    required: false
  }
})


const useDragEditStore = useDragEdit()

// 锚点
const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']

// 光标朝向
const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']



// 计算当前选中目标
const hover = computed(() => {
  // const isDrag = useDragEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]


  return props.item.id === useDragEditStore.getTargetChart.id
})

// 兼容多值场景
const select = computed(() => {
  const id = props.item.id

  return true
})


// 隐藏
const hide = computed(() => {
  return props.item.status.hide
})
const handlerMouseDown = (e: any, item: any) => {
  e.preventDefault();
  e.stopPropagation();

  useDragEditStore.setCurrentComponent(item);
  const prevComponentInstance = useDragEditStore.getTargetChart;
  console.log(prevComponentInstance)
  if (!prevComponentInstance) return;

  const startX = e.clientX;
  const startY = e.clientY;
  const { x: initX, y: initY } = prevComponentInstance.attr;
  const scale =  1;

  // 节流版的 mousemove 处理
  const mousemove = throttle((moveEvent: MouseEvent) => {
    const offsetX = (moveEvent.clientX - startX) / scale;
    const offsetY = (moveEvent.clientY - startY) / scale;

    prevComponentInstance.attr = {
      ...prevComponentInstance.attr,
      x: Math.round(initX + offsetX),
      y: Math.round(initY + offsetY),
    };
  }, 20); // 20ms 节流间隔

  const mouseup = () => {
    document.removeEventListener('mousemove', mousemove);
    document.removeEventListener('mouseup', mouseup);
    document.removeEventListener('mouseleave', mouseup);
    mousemove.cancel(); // 清除节流函数的残留调用
  };

  document.addEventListener('mousemove', mousemove);
  document.addEventListener('mouseup', mouseup);
  document.addEventListener('mouseleave', mouseup);
};
</script>

<style lang="scss" scoped>
@mixin go($block) {
  $B: 'go' + '-' + $block;
  .#{$B} {
    @content;
  }
}
@include go(shape-box) {
  position: absolute;
  cursor: move;

  &.lock {
    cursor: default !important;
  }

  &.hide {
    display: none;
  }

  /* 锚点 */
  .shape-point {
    z-index: 1;
    position: absolute;
    width: 7px;
    height: 7px;
    border: 3px solid #000;
    border-radius: 5px;
    background-color: #fff;
    transform: translate(-40%, -30%);
    &.t {
      width: 30px;
      transform: translate(-50%, -50%);
    }
    &.b {
      width: 30px;
      transform: translate(-50%, -30%);
    }
    &.l,
    &.r {
      height: 30px;
    }
    &.r {
      transform: translate(-20%, -50%);
    }
    &.l {
      transform: translate(-45%, -50%);
    }
    &.rt,
    &.rb {
      transform: translate(-30%, -30%);
    }
  }
  /* 选中 */
  .shape-modal {
    position: absolute;
    top: 0;
    left: 0;

    .shape-modal-select,
    .shape-modal-change {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }

    .shape-modal-select {
      opacity: 0.1;
      top: 2px;
      left: 2px;
      &.active {
        background-color: #000;
      }
    }
    .shape-modal-change {
      border: 2px solid rgba(0, 0, 0, 0);
      &.selectActive,
      &.hoverActive {
        border-color:  #000;
        border-width: 2px;
      }
      &.hoverActive {
        border-style: dotted;
      }
      &.selectActive {
        border-style: solid;
      }
    }
  }
}
</style>
